<template>
    <div>
        <mian-layout @refresh="resetForm('search_data')">
            <template v-slot:conTop>
                <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                    <el-form-item label="ID/昵称" prop="userIdOrNickname">
                        <el-input v-model="search.userIdOrNickname" placeholder="输入商品分类名称"></el-input>
                    </el-form-item>
                    <el-form-item label="登录账号" prop="phone">
                        <el-input v-model="search.phone" placeholder="输入商品分类名称"></el-input>
                    </el-form-item>
                    <el-form-item label="用户身份" prop="statusArtist">
                        <el-select v-model="search.statusArtist" placeholder="选择用户身份">
                            <el-option  label="全部" value=""> </el-option>
                            <el-option  label="艺术家" :value="1"> </el-option>
                            <el-option  label="注册会员" :value="2"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="dataTime">
                        <el-date-picker v-model="dataTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" plain  icon="el-icon-search" @click="doSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm('search_data')">重置</el-button>
                    </el-form-item>
                </el-form>   
            </template>
            <div class="btnBox" style="padding-bottom:10px">
                <el-button type="success" size="mini" @click="opegDg">一键为全用户发放红包</el-button>
            </div>
            <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :sequence="true" :page='page' showCheck selectKey="userId">
                
                <el-table-column property="userId" label="用户ID" align='center'></el-table-column>
                <el-table-column property="" label="用户身份" align='center'>
                    <template slot-scope="scope">
                        <span v-if="scope.row.statusArtist==1">艺术家</span>
                        <span v-else>注册会员</span>
                    </template>
                </el-table-column>
                <el-table-column property="nick" label="昵称" align='center'></el-table-column>
                <el-table-column property="phone" label="登录账号" align='center'></el-table-column>
                <el-table-column property="recommendPhone" label="推荐人" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.recommendPhone || '--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="createTime" label="创建时间" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime}}</span>
                    </template>
                </el-table-column>
                
                
                <el-table-column prop="operation" align='center' label="操作" width="200">
                    <template slot-scope='scope'>
                        <el-button size="mini" type="danger" plain icon="el-icon-present" @click="singleOpegDg(scope.row.userId)">发放红包</el-button>
                    </template>
                </el-table-column>

            </my-table>
        </mian-layout>
        <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="false" width="500px" title="发放红包">
            <br/>
            <el-form size="small" :model="ruleForm" ref="ruleForm" label-width="50px" class="demo-ruleForm">
                <el-form-item label="红包" prop="amount">
                    <el-input type="number" v-model="ruleForm.amount" placeholder="单次发放最高金额为200" clearable></el-input>
                </el-form-item>  
            </el-form> 
            <br/>
            <div style="text-align: right;padding-bottom:20px">
                <el-button  size="small" @click="dialogVisible=false" icon="el-icon-close">取 消</el-button>
                <el-button type="primary" size="small" icon="el-icon-check" @click="couponSend">确 定</el-button>
            </div>
        </my-dialog> 
    </div>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myDialog from '@/components/public/myDialog';
import {
  get_user_list,
  coupon_send
} from '@/api/arApi'
export default {
    components:{
      myTable,
      myDialog
    },
    data(){
        return{
            search:{
                userIdOrNickname:'',
                phone:'',
                createTimeEnd: "",
                createTimeStart: "",
                orderField: "",
                orderType: "",
                statusArtist:''
            },
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            dataTime:'',
            dialogVisible:false,
            ruleForm:{
                amount:'',
                userIds:null
            }
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.getList()
    },
    methods:{
        doSearch(){
            this.pageIndex = 1
            this.getList()
        },
        getList(){ 
            this.loading = true
            if(this.dataTime){
                this.search.createTimeStart = this.dataTime[0]
                this.search.createTimeEnd = this.dataTime[1]
            }
            get_user_list({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                ...this.search
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
            })
        },
        
        tableSelect(data){
            //this.ruleForm.userIds = data.userId
            this.multipleSelectionIds = data.userId
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dataTime = []
            for (const key in this.search) {
               this.search[key] = '' 
            }
            this.page.pageIndex = 1
            this.getList()
        },
        opegDg(){
            if(this.multipleSelectionIds.length>0){
                this.ruleForm.userIds = this.multipleSelectionIds
            }else{
                this.ruleForm.userIds = null
            }
            this.ruleForm.amount = ''
            this.dialogVisible=true
        },

        singleOpegDg(id){
            this.ruleForm.amount = ''
            this.ruleForm.userIds = [id]
            this.dialogVisible=true
        },
        clearFrom(){
          this.ruleForm.amount = ''
          this.ruleForm.userIds = null
        },

        async couponSend(item){
            if(!this.ruleForm.amount){
               return this.$message.warning('请输入发放金额');
            }

            const res = await coupon_send(this.ruleForm)
            if(res.success){
                this.clearFrom()
                this.$message.success('发放成功')
                this.page.pageIndex = 1
                this.getList()
                this.dialogVisible = false
            }else{
                this.$message.error('发放失败');
            }
        },
    }
}
</script>